<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-id="parentId"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
  >
    <div v-if="previewStatus" class="inner_value">
      {{ formData[fieldId].join(" ~ ") }}
    </div>
    <el-date-picker
      v-else
      ref="fieldEditor"
      v-model="formData[fieldId]"
      :type="field.options.type"
      class="full-width-input"
      :disabled="field.options.disabled"
      :readonly="field.options.readonly"
      :size="field.options.size"
      :clearable="field.options.clearable"
      :editable="field.options.editable"
      :format="field.options.format"
      :value-format="field.options.valueFormat"
      :start-placeholder="
        field.options.startPlaceholder ||
        i18nt('render.hint.startDatePlaceholder')
      "
      :end-placeholder="
        field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')
      "
      @focus="handleFocusCustomEvent"
      @blur="handleBlurCustomEvent"
      @change="handleChangeEvent"
    />
  </form-item-wrapper>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import FormItemWrapper from "./form-item-wrapper";
import emitter from "Yan/utils/emitter";
import i18n from "Yan/utils/i18n";
import fieldMixin from "./fieldMixin";

export default {
  name: "date-range_unit",
  componentName: "FieldWidget",
  components: {
    FormItemWrapper,
  },
  mixins: [emitter, fieldMixin, i18n],
  props: {
    designer: Object,
    fieldId: String,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    formData: Object,
    designState: {
      type: Boolean,
      default: false,
    },
  },
  // inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
  data() {
    return {
      oldFieldValue: null, // field组件change之前的值
      // fieldModel: null,
      rules: [],
    };
  },
  computed: {},
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    // this.initFieldModel();
    // this.registerToRefList()
    this.initEventHandler();
    this.buildFieldRules();

    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  // beforeDestroy() {
  //   this.unregisterFromRefList()
  // },

  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//

.full-width-input {
  width: 100% !important;
}
</style>
